{% extends "baseMenuMapa.html" %}
{% load crispy_forms_tags %}

{% block extras %}
<script src="../Archivos/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../Archivos/js/ZeroClipboard.js"></script>
<script type="text/javascript" charset="utf-8" src="../Archivos/js/TableTools.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../Archivos/js/dataTables.bootstrap.js"></script>

<link href="../Archivos/css/dataTables.bootstrap.css" rel="stylesheet">

<script type="text/javascript" charset="utf-8">
			$(document).ready( function () {
				$('#stopList').dataTable( {
					"sDom": "<'row-fluid'<'span6'T><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
					"oTableTools": {
						"sRowSelect": "single",
						"aButtons": [
									]
					}
				} );
			});

			$(document).ready( function () {
				$('#frecuencyList').dataTable( {
					"sDom": "<'row-fluid'<'span6'T><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
					"oTableTools": {
						"sRowSelect": "single",
						"aButtons": [
									]
					}
				} );
			});
</script>
		
<div class="row-fluid pagination-centered">
  	{% crispy form %}
  	{% if error %} <div class="span12">Error: {{ error }}</div>{% endif %}
  	<div class="span5">
		<div id="mapas" style="width:100%; height:400px;">Aca va el mapa</div>
	</div>
	<div class="accordion span6" id="accordion2">
	  <div class="accordion-group">
	    <div class="accordion-heading">
	      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
	        Ver paradas
	      </a>
	    </div>
	    <div id="collapseOne" class="accordion-body collapse in">
	      <div class="accordion-inner">
		    {% if stopList %}
	  		<table id="stopList" class="table table-striped table-bordered">
	  			<thead>
	  				<tr>
	  					<th style="display:none"><a href="#">Orden</a></th>
	  					<th><a href="#">Calle</a></th>
	  					<th><a href="#">Interseccion</a></th>
	  					<th><a href="#">Sentido</a></th>
	 					</tr>
				</thead>
	  			<tbody>	
		  		{% for stop in stopList %}
		  			{% if stop.paradaactiva %}
		  			<tr>
		  				<td style="display:none">{{ stop.orden }}</td>
		  				<td>{{ stop.calle1 }}</td>
		  				<td>{{ stop.calle2 }}</td>
		  				<td>{{ stop.sentido }}</td>
	  				</tr>
	  				{% endif %}
		  		{% endfor%}
	  			</tbody>
	  		</table>
	  		{% else %}
	  		<span>No hay paradas disponibles</span>
	  		{% endif %}
	      </div>
	    </div>
	  </div>
	  <div class="accordion-group">
	    <div class="accordion-heading">
	      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
	        Ver Frecuencias
	      </a>
	    </div>
	    <div id="collapseTwo" class="accordion-body collapse">
	      <div class="accordion-inner">
	        {% if frecuencyList %}
	  		<table id="frecuencyList" class="table table-striped table-bordered">
	  			<thead>
	  				<tr>
	  					<th style="display:none"><a href="#">Id</a></th>
	  					<th><a href="#">Dia</a></th>
	  					<th><a href="#">Horario</a></th>
	 					</tr>
				</thead>
	  			<tbody>	
		  		{% for frecuency in frecuencyList %}
		  			<tr>
		  				<td style="display:none">{{ frecuency.idfrecuencia }}</td>
		  				<td>{{ frecuency.dia_semana }}</td>
		  				<td>{{ frecuency.hora }}</td>
	  				</tr>
		  		{% endfor%}
	  			</tbody>
	  		</table>
	  		{% else %}
	  		<span>No hay frecuencias disponibles</span>
	  		{% endif %}
	      </div>
	    </div>
	  </div>
	</div>
</div>
{% endblock %}

{% block marcas %}
    {% if stopList %}
    {% for stop in stopList %}
    {% if stop.paradaactiva %}
    markerPosition = new google.maps.LatLng({{ stop.latitud }},{{ stop.longitud}});
    marker = new google.maps.Marker({
        map:map,
        draggable:false,
        position: markerPosition,
        title: "Parada: {{ stop.calle1 }} {% if stop.calle2 %}& {{ stop.calle2 }}{% endif %}({{ stop.sentido }})",
        icon: markerImage
    });
    limits.extend(markerPosition);
    {% endif%}
    {% endfor %}
    
    var flightPlanCoordinates = [
      {% for stop in stopList %}
	    new google.maps.LatLng({{ stop.latitud }},{{ stop.longitud}}),
      {% endfor %}
	];
	var flightPath = new google.maps.Polyline({
	    path: flightPlanCoordinates,
	    strokeColor: "#FF0000",
	    strokeOpacity: 1.0,
	    strokeWeight: 2
	});
 	flightPath.setMap(map);
    {% endif %}   
{% endblock %}
